<template>
  <div class="micro-image-ad-box">
    <!--预览区-->
    <div class="previewStyle">
      <!-- 纵向平铺 -->
      <div v-show="formData.indicator == 1&&formData.imageList.length" class="dis flex_d" :style="{paddingLeft: formData.pageMargin/2 + 'px',paddingRight: formData.pageMargin/2 + 'px',paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
        <!-- <el-image v-for="(item,index) in formData.imageList" :key="index" fit="fill" class="flex_1 endtileImg" :style="{borderRadius: formData.cornerBorder/2 + 'px',marginBottom: formData.imageMargin_a/2 + 'px'}" :src="item.url" /> -->
        <div v-for="(item,index) in formData.imageList" :key="index" class="flex_1 endtileImg" :style="{borderRadius: formData.cornerBorder/2 + 'px',marginBottom: formData.imageMargin_a/2 + 'px'}">
          <el-image fit="fill" :src="item.url" />
          <div v-show="item.isTag" class="img-tag" :class="`img-tag-${item.style}`" :style="{top:`${formData.topRange}%`,left:`${formData.leftRange}%`,borderTopRightRadius:`${formData.tagHorn/2}px`,borderBottomRightRadius:`${formData.tagHorn/2}px`}">{{ item.labelName }}</div>
        </div>
      </div>
      <!-- 横向平铺 -->
      <div v-show="formData.indicator == 4&&formData.imageList.length" class="dis" :style="{height: formData.height/2 + 'px',paddingLeft: formData.pageMargin/2 + 'px',paddingRight: formData.pageMargin/2 + 'px',paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
        <!-- <el-image v-for="(item,index) in formData.imageList" :key="index" fit="fill" class="flex_1 tileImg" :style="{borderRadius: formData.cornerBorder/2 + 'px',marginRight: formData.imageMargin_a/2 + 'px'}" :src="item.url" /> -->
        <div v-for="(item,index) in formData.imageList" :key="index" class="flex_1 tileImg" :style="{borderRadius: formData.cornerBorder/2 + 'px',marginRight: formData.imageMargin_a/2 + 'px'}">
          <el-image fit="fill" :src="item.url" />
          <div v-show="item.isTag" class="img-tag" :class="`img-tag-${item.style}`" :style="{top:`${formData.topRange}%`,left:`${formData.leftRange}%`,borderTopRightRadius:`${formData.tagHorn/2}px`,borderBottomRightRadius:`${formData.tagHorn/2}px`}">{{ item.labelName }}</div>
        </div>
      </div>
      <!-- 横向滚动 -->
      <div v-show="formData.indicator == 3&&formData.imageList.length">
        <el-scrollbar>
          <div class="dis" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
            <!-- <img v-for="(item,index) in formData.imageList" :key="index" fit="fill" :style="{width: formData.imageSize/2 + 'px', height: formData.imageSize/2 + 'px',borderRadius: formData.cornerBorder/2 + 'px',marginRight: formData.imageMargin_a/2 + 'px'}" :src="item.url"> -->
            <div v-for="(item,index) in formData.imageList" :key="index" class="sc-bar" :style="{width: formData.imageSize/2 + 'px', height: formData.imageSize/2 + 'px',borderRadius: formData.cornerBorder/2 + 'px',marginRight: formData.imageMargin_a/2 + 'px'}">
              <img fit="fill" :src="item.url" :style="{width:formData.imageSize/2 + 'px', height: formData.imageSize/2 + 'px'}">
              <div v-show="item.isTag" class="img-tag" :class="`img-tag-${item.style}`" :style="{top:`${formData.topRange}%`,left:`${formData.leftRange}%`,borderTopRightRadius:`${formData.tagHorn/2}px`,borderBottomRightRadius:`${formData.tagHorn/2}px`}">{{ item.labelName }}</div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <!-- 自动轮播 -->
      <div v-show="formData.indicator == 2&&formData.imageList.length" :style="{paddingLeft: formData.pageMargin/2 + 'px',paddingRight: formData.pageMargin/2 + 'px',paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
        <div class="pos_r">
          <el-carousel :class="{indicator_a: formData.indicatorStyle == 1, indicator_b: formData.indicatorStyle == 2,indicator_c: formData.indicatorStyle == 3,indicator_d: formData.indicatorStyle == 4}" :style="{borderRadius: formData.cornerBorder/2 + 'px',overflow: 'hidden'}" :height="formData.height/2 + 'px'" :autoplay="true" :loop="true" :interval="Number(formData.intervalTime)" arrow="never" @change="sweiperChange_a">
            <el-carousel-item v-for="(item,index) in formData.imageList" :key="index">
              <el-image :style="{width: '100%',height: '100%'}" :src="item.url" />
              <div v-show="item.isTag" class="img-tag" :class="`img-tag-${item.style}`" :style="{top:`${formData.topRange}%`,left:`${formData.leftRange}%`,borderTopRightRadius:`${formData.tagHorn/2}px`,borderBottomRightRadius:`${formData.tagHorn/2}px`}">{{ item.labelName }}</div>
            </el-carousel-item>
          </el-carousel>
          <div v-show="formData.indicatorStyle == 4" class="indicator_e">{{ indicator_d_active }}/{{ formData.imageList.length }}</div>
        </div>
      </div>
      <!-- 滑动播放 -->
      <div v-show="formData.indicator == 5&&formData.imageList.length" :style="{paddingLeft: formData.pageMargin/2 + 'px',paddingRight: formData.pageMargin/2 + 'px',paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
        <div class="pos_r">
          <el-carousel :class="{indicator_a: formData.indicatorStyle == 1, indicator_b: formData.indicatorStyle == 2,indicator_c: formData.indicatorStyle == 3,indicator_d: formData.indicatorStyle == 4}" :height="formData.height/2 + 'px'" :autoplay="true" :loop="true" :interval="Number(formData.intervalTime)" arrow="never" @change="sweiperChange_a">
            <el-carousel-item v-for="(item,index) in formData.imageList" :key="index" :style="{paddingLeft: formData.imageMargin_b/2 + 'px',paddingRight: formData.imageMargin_b/2 + 'px'}">
              <el-image :style="{width: '100%',height: '100%',borderRadius: formData.cornerBorder/2 + 'px',overflow: 'hidden'}" :src="item.url" />
              <div v-show="item.isTag" class="img-tag" :class="`img-tag-${item.style}`" :style="{top:`${formData.topRange}%`,left:`${formData.leftRange}%`,borderTopRightRadius:`${formData.tagHorn/2}px`,borderBottomRightRadius:`${formData.tagHorn/2}px`}">{{ item.labelName }}</div>
            </el-carousel-item>
          </el-carousel>
          <div v-show="formData.indicatorStyle == 4" class="indicator_e">{{ indicator_d_active }}/{{ formData.imageList.length }}</div>
        </div>
      </div>
      <div v-show="!formData.imageList.length" class="image-ad-view">
        <div class="image-ad-title">
          建议宽度为750像素
        </div>
      </div>
    </div>
    <!--编辑区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap styleWrap">
          <div class="design-editor-component-title">图片广告</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.indicator">
              <el-tooltip v-for="(item,index) in tabList" :key="index" effect="dark" :content="item.title" placement="bottom">
                <el-radio-button :label="index + 1">
                  <span :class="[item.icon]" />
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
          <el-tabs v-model="settingActive" tab-position="top" style="marginTop: 10px;" @tab-click="handleClick">
            <el-tab-pane label="内容设置" name="0">
              <p>添加图片：<span style="color:#b7b7b7;">最多添加10个广告</span></p>
              <!-- <div class="image_con">
                <span>显示时间：</span>
                <el-date-picker
                  v-model="showTime"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
              </div> -->
              <div v-if="formData.indicator !== 6">
                <draggable
                  :list="formData.imageList"
                  ghost-class="ghost"
                  handle=".ad-handle"
                >
                  <div v-for="(item,index) in formData.imageList" :key="index" class="ad-image-main">
                    <div class="ad-image-list">
                      <div class="ad-image-list-img ad-handle" :style="{backgroundImage:`url(${item.url})`}">
                        <p class="re-choose-img" @click="changeImg(index)">更换图片</p>
                      </div>
                      <div class="ad-image-list-content">
                        <div>
                          <div class="ad-image-title">
                            <span>图片标题：</span>
                            <el-input v-model="item.title" size="mini" placeholder="输入标题" />
                          </div>
                          <div class="ad-image-title image_con">
                            <span>展示时间：</span>
                          </div>
                          <div class="ad-image-title image_con">
                            <el-date-picker
                              v-model="item.showTime"
                              type="datetimerange"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              :default-time="['00:00:00', '23:59:59']"
                            />
                          </div>

                          <div class="ad-image-link dis al_item">
                            <span>跳转路径：</span>
                            <div v-if="item.type >= 0&&item.microType&&item.microTitle" class="dis al_item">
                              <span class="typeName">{{ item.microType }}</span>
                              <span class="microTitle">{{ item.microTitle }}</span>
                              <span class="cursor modifyBtn microTitle" @click="choosePage(index)">修改</span>
                            </div>
                            <div v-else class="cursor modifyBtn" @click="choosePage(index)">请选择跳转到的页面</div>
                          </div>
                          <div class="dis al_item w100e item_mar" style="margin:6px 0 0">
                            <span>标签：</span>
                            <el-radio-group v-model="item.isTag" size="small">
                              <el-radio-button :label="true">显示</el-radio-button>
                              <el-radio-button :label="false">隐藏</el-radio-button>
                            </el-radio-group>
                          </div>
                        </div>
                        <i class="el-icon-error close-icon" @click="formData.imageList.splice(index, 1)" />
                      </div>
                    </div>
                    <div v-show="item.isTag" class="btn-style">
                      <el-radio-group v-model="item.style" size="small" disabled>
                        <el-radio v-for="(item,index) in 4" :key="index" :label="item">样式{{ item }}</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </draggable>
              </div>
              <!--hot model-->
              <div v-else>
                <draggable
                  :list="formData.imageList"
                  ghost-class="ghost"
                  handle=".ad-handle"
                >
                  <div v-for="(item,index) in formData.imageList" :key="index" class="ad-image-hot">
                    <div class="add-ad-image" @click="showHotAreaPop(index)">点击添加热区</div>
                    <div class="add-ad-image" @click="changeImg(index)">更换图片</div>
                    <div class="ad-image-hot-box">
                      <div v-show="item.activeBoxs.length" class="ad-image-hot-content ad-handle">
                        <span
                          v-for="(hotItem,hotIndex) in item.activeBoxs"
                          :key="hotIndex"
                          class="ad-hot-box-item"
                          :style="`transform: translate(${hotItem.translateX * hotScale}px,${hotItem.translateY * hotScale}px);width:${hotItem.width * hotScale}px;height:${hotItem.height * hotScale}px`"
                        >
                          <el-dropdown trigger="click" size="small" @command="command">
                            <div class="cursor">
                              <p>{{ hotItem.type | typeNameFilter }}</p>
                              <p>{{ hotItem.title||'设置跳转' }}</p>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item
                                v-for="(linkItem,linkIndex) in linkList"
                                :key="linkIndex"
                                :command="({linkItem,currentHotEditIndex:hotIndex,currentEditIndex:index})"
                              >
                                <span style="font-size: 12px;">{{ linkItem.title }}</span>
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                          <i class="el-icon-close close-icon" @click="item.activeBoxs.splice(hotIndex, 1)" />
                        </span>
                      </div>
                      <img class="ad-handle" :src="item.url">
                      <i class="el-icon-error close-icon" @click="formData.imageList.splice(index, 1)" />
                    </div>
                  </div>
                </draggable>
              </div>
              <!--选择图片框-->
              <div
                v-if="10 - formData.imageList.length !== 0"
                class="ad-add-image"
                @click="canChooseImagesNum = 10 - formData.imageList.length;isChangeImg = false;$refs.pics.dialog = true;"
              >
                <p>
                  <i class="el-icon-plus" /> 添加一个背景图
                </p>
                <p style="color: #b7b7b7;">建议宽度 750 像素</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>边角样式</div>
                    <el-radio-group v-model="formData.cornerBorder" size="small">
                      <el-radio-button label="0">直角</el-radio-button>
                      <el-radio-button label="16">圆角</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div v-show="formData.indicator == 1 || formData.indicator == 3 || formData.indicator == 4" class="dis dis_ju_spb al_item w100e item_mar">
                    <div>图片间距</div>
                    <el-radio-group v-model="formData.imageMargin_a" size="small">
                      <el-radio-button label="0">无</el-radio-button>
                      <el-radio-button label="30">有</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div v-show="formData.indicator == 5" class="dis dis_ju_spb al_item w100e item_mar">
                    <div>图片间隔</div>
                    <el-radio-group v-model="formData.imageMargin_b" size="small">
                      <el-radio-button label="0">小</el-radio-button>
                      <el-radio-button label="15">中</el-radio-button>
                      <el-radio-button label="30">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div v-show="formData.indicator == 3" class="dis dis_ju_spb al_item w100e item_mar">
                    <div>图片大小</div>
                    <el-radio-group v-model="formData.imageSize" size="small">
                      <el-radio-button label="200">小</el-radio-button>
                      <el-radio-button label="260">中</el-radio-button>
                      <el-radio-button label="400">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div v-show="formData.indicator == 5 || formData.indicator == 2" class="dis dis_ju_spb al_item w100e item_mar">
                    <div>轮播间隔</div>
                    <el-radio-group v-model="formData.intervalTime" size="small">
                      <el-radio-button label="3000">3s</el-radio-button>
                      <el-radio-button label="5000">5s</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div v-show="formData.indicator == 5 || formData.indicator == 2" class="dis dis_ju_spb al_item w100e item_mar">
                    <div>轮播样式</div>
                    <el-radio-group v-model="formData.indicatorStyle" size="small">
                      <el-radio-button label="1">样式1</el-radio-button>
                      <el-radio-button label="2">样式2</el-radio-button>
                      <el-radio-button label="3">样式3</el-radio-button>
                      <el-radio-button label="4">样式4</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div v-show="formData.indicator == 1 || formData.indicator == 2 || formData.indicator == 4 || formData.indicator == 5" class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>页边距</span>
                    <span class="text_mar">{{ formData.pageMargin }}px</span>
                  </div>
                  <el-radio-group v-model="formData.pageMargin" size="small">
                    <el-radio-button label="0">无</el-radio-button>
                    <el-radio-button label="30">有</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div v-show="formData.indicator !== 1&&formData.indicator !== 3" class="progressWrap">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>框体高度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.height" :max="800" />
                      </div>
                      <div class="inpWrap">{{ formData.height }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="isTagStyle" class="styleWrap">
                <div class="titleStyle">
                  标签样式
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>边角样式</div>
                  <el-radio-group v-model="formData.tagHorn" size="small">
                    <el-radio-button :label="0">直角</el-radio-button>
                    <el-radio-button :label="10">圆角</el-radio-button>
                    <el-radio-button :label="32">半圆角</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>距离左边</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.leftRange" :max="100" />
                      </div>
                      <div class="inpWrap">{{ formData.leftRange }}</div>
                    </div>
                  </div>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>距离上边</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.topRange" :max="100" />
                      </div>
                      <div class="inpWrap">{{ formData.topRange }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="添加热区"
      :visible.sync="dialogHot"
      width="550px"
    >
      <div class="ad-hot-box">
        <div v-if="dialogHot&&formData.imageList.length">
          <img :src="formData.imageList[currentEditIndex].url" class="box-img">
          <div
            v-for="(item,index) in cacheImageActiveBox"
            :key="index"
            v-drag="{cacheImageActiveBox,index}"
            class="ad-drag"
          >
            <el-dropdown trigger="click" size="small" @command="command">

              <div class="cursor">
                <p>{{ item.type | typeNameFilter }}</p>
                <p>{{ item.title||'设置跳转' }}</p>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(linkItem,linkIndex) in linkList"
                  :key="linkIndex"
                  :command="({linkItem,currentHotEditIndex:index,isCacheImage:true})"
                >
                  <span style="font-size: 12px;">{{ linkItem.title }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <i class="el-icon-close close-icon" @click="cacheImageActiveBox.splice(index, 1)" />
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: right;margin-top: 20px;">
        <el-button size="mini" type="primary" @click="addHotArea">添加热区</el-button>
        <el-button size="mini" @click="saveHotBox">保存</el-button>
      </div>
    </el-dialog>

    <chooseImages
      ref="pics"
      :can-choose-images-num="canChooseImagesNum"
      :max="canChooseImagesNum"
      @chooseImagesEnd="chooseImagesEnd"
      @getUrl="getPicsUrl"
    />
    <!--我的图片-->
    <!-- <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="我的图片"
      :visible.sync="dialogChooseImgVisible"
      width="42%"
    >
      <div class="choose-goods-compent">
        <chooseImages
          :can-choose-images-num="canChooseImagesNum"
          :is-get-choose-images="isGetChooseImages"
          @chooseImagesEnd="chooseImagesEnd"
        />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseImages=!isGetChooseImages">确定</el-button>
          <el-button size="mini" @click="dialogChooseImgVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog> -->

    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="已上架商品"
      :visible.sync="dialogChooseGoods"
      width="70%"
    >
      <div class="dialog-content">
        <chooseGoods :is-get-choose-data="isGetChooseData" @chooseGoodsFun="chooseGoodsFun" />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseData=!isGetChooseData">确定</el-button>
          <el-button size="mini" @click="dialogChooseGoods = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!--选择微页面-->

    <el-dialog
      :close-on-click-modal="false"
      :modal="false"
      top="5vh"
      :visible.sync="dialogChoosePages"
      title="页面选择"
      width="55%"
    >

      <choose-feature
        :is-get-choose-data="isGetChooseFeature"
        @chooseChooseFeaturesFun="chooseChooseFeaturesFun"
      />
      <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
        <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
        <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
      </div>

    </el-dialog>

  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
